<template>
  <div class="sider" >
    <div>
      <a-card title="热门文章" style="width: 300px" :bordered="false">
        <a-list item-layout="horizontal" :data-source="hotArticles"  size="small" :split="false">
          <a-list-item slot="renderItem" slot-scope="item" >
            <a  @click="$router.push(`/articledetail/${item.ID}`)" >{{ item.title }}</a>
          </a-list-item>
        </a-list>
      </a-card>

      <a-card title="热门分类" style="width: 300px" :bordered="false">
        <template >
          <span>
            <a-tag v-for="cate in hotCates" :key="cate.ID" color="blue">
              {{ cate.name }}
              <a-badge
              :count= cate.num
              :number-style="{
                backgroundColor: '#fff',
                color: '#999',
                boxShadow: '0 0 0 0px',}"/>
            </a-tag>
          </span>
        </template>
      </a-card>

      <a-card title="热门标签" style="width: 300px" :bordered="false">
        <template >
          <span>
            <a-tag v-for="tag in hotTags" :key="tag.ID" color="blue">
              {{ tag.name }}
              <a-badge
                :count= tag.num
                :number-style="{
                  backgroundColor: '#fff',
                  color: '#999',
                  boxShadow: '0 0 0 0px',}"/>
            </a-tag>
          </span>
        </template>
      </a-card>

      <a-card title="友情链接" style="width: 300px" :bordered="false">
        <a-list item-layout="vertical" :data-source="links" size="small" :split="false" >
          <a-list-item slot="renderItem" slot-scope="item" >
            <a @click="golink(item.url)" >{{ item.name }}</a>
          </a-list-item>
        </a-list>
      </a-card>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hotArticles: [],
      hotCates: [],
      hotTags: [],
      links: []
    }
  },
  created () {
    this.getHotArticles()
    this.getCates()
    this.getTags()
    this.getLinks()
  },
  mounted () {
  },
  methods: {
    async getHotArticles () {
      const { data: res } = await this.$axios.get('/client/article/hot')
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.hotArticles = res.data
    },
    async getTags () {
      const { data: res } = await this.$axios.get('/client/tag/hot')
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.hotTags = res.data
    },
    async getCates () {
      const { data: res } = await this.$axios.get('/client/category/hot')
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.hotCates = res.data
    },
    async getLinks () {
      const { data: res } = await this.$axios.get('/client/links/hot')
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.links = res.data
    },
    async golink (url) {
      window.open(url, '_blank')
    }
  }
}
</script>
<style scoped>
  .sider{
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
